<template>
  <div>
    <center><h1>我的钱包</h1></center>
    <a-form-item v-bind="formItemLayout" label="我的余额" >
      <a-input v-model="money" disabled/>
    </a-form-item>
    <a-form-item v-bind="formItemLayout" label="充值金额" >
      <a-input v-model="moneyadd" />
    </a-form-item>
    <a-form-item v-bind="formItemLayout" label="提现金额" >
      <a-input v-model="moneyminus" @change="hint"/>
      <div v-if="messageStatus==1">{{ message }}</div>
    </a-form-item>
    <a-form-item v-bind="formItemLayout" label="可用优惠券：">
      <div v-if="coupon.status ==1"><input type="checkbox" name="" id="" v-model="defaultChecked" @click="change">{{coupon.money}}元优惠券</div>
      <div v-else>无优惠券</div>
    </a-form-item>
    <a-form-item v-bind="tailFormItemLayout">
      <a-button type="primary" html-type="submit" @click="submit">
        微信充值
      </a-button>
    </a-form-item> 
    <a-form-item v-bind="tailFormItemLayout">
      <a-button type="primary" html-type="submit" @click="submit2">
        paypal充值
      </a-button>
    </a-form-item>
    <a-form-item v-bind="tailFormItemLayout">
      <a-button type="primary" html-type="submit" @click="submit3">
        充值
      </a-button>
      <a-button type="primary" html-type="submit" @click="submit4">
        提现
      </a-button>
    </a-form-item>
    <a-form-item v-bind="formItemLayout" label="二维码">
      <img :src="src" />
    </a-form-item>
    <a-form-item v-bind="formItemLayout" label="排行榜">
      <a-list item-layout="horizontal" :data-source="data_list">
          <a-list-item slot="renderItem" slot-scope="item, index">
          <a-list-item-meta>
              <a slot="title">用户{{ item.name }}充值了{{ item.money }}元</a>
          </a-list-item-meta>
          </a-list-item>
        </a-list>
    </a-form-item>
   </div>
</template>



<script>
import axios from 'axios'
import { money_post, moneyinfo_get, moneyminus_post } from '../axios_send/api'
export default {
  data() {
    return {
      money:"1",
      src:"",
      user_id:sessionStorage.getItem('user_id'),
      username:sessionStorage.getItem('username'),
      moneyadd:0,
      data_list:[],
      coupon:{},
      status:0,
      defaultChecked:false,
      couponStatus:0,
      moneyminus:0,
      messageStatus:0,
      message:'余额不足',
      formItemLayout: {
        labelCol: {
          xs: { span: 12 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 12 },
          sm: { span: 5 },
        },
      },
      tailFormItemLayout: {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0,
          },
          sm: {
            span: 16,
            offset: 8,
          },
        },
      },
      dataSource: [
        {
          key: '0',
          name: 'Edward King 0',
          age: '32',
          address: 'London, Park Lane no. 0',
        },
        {
          key: '1',
          name: 'Edward King 1',
          age: '32',
          address: 'London, Park Lane no. 1',
        },
      ],
      columns: [
        {
          title: 'name',
          dataIndex: 'name',
        },
        {
          title: 'age',
          dataIndex: 'age',
        },
        {
          title: 'address',
          dataIndex: 'address',
        },
        {
          title: 'operation',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' },
        },
      ],
    };
  },
  methods: {
    submit:function(){
       this.axios.get('http://localhost:8001/user/wx_pay/').then((result) =>{
            console.log(result.data.img);
            this.src = "http://localhost:8001/static/upload/"+result.data.img
      });
    },
    onDelete(key) {
      console.log(this.dataSource[key]);
    },
    getMoney(){
        axios({
            url:'http://127.0.0.1:8001/user/get_money/?user_id=' + this.user_id
        }).then(res=>{
            console.log(res.data)
            this.money = res.data.money
            this.coupon = res.data.coupon
        })
    },
    submit2(){
      axios({
        url:'http://127.0.0.1:8001/user/payment/'
      }).then(res=>{
        console.log(res)
      })
    },
    submit3(){
      var data = {
        'username':this.username,
        'moneyadd':this.moneyadd,
        'couponstatus':this.couponStatus
      }
      console.log(data,'1111111111')
      money_post(data).then(res=>{
        console.log(res)
        this.getMoney()
        this.getRank()
      })
    },
    getRank(){
      moneyinfo_get().then(res=>{
        console.log(res)
        this.data_list = res
      })
    },
    change(){
      if(this.defaultChecked){
        this.defaultChecked = false
        console.log(typeof this.moneyadd,typeof this.coupon.money,'888888888')
        this.moneyadd /= 1
        if(this.couponStatus <= this.coupon.money){
          this.moneyadd = this.moneyadd
        }
        else{
          this.moneyadd  = this.couponStatus
        }
        this.couponStatus = 0
        console.log(this.couponStatus,'98789798')
        console.log(this.defaultChecked)
      }else{
        this.defaultChecked = true
        if(this.moneyadd > this.coupon.money){
          console.log(this.moneyadd,'zxczxczxc')
          this.moneyadd -= this.coupon.money
          this.couponStatus += this.moneyadd + this.coupon.money
          console.log(this.couponStatus,'32132132')
          console.log(this.moneyadd,'qweqweqwe')
        }else{
          alert('多充一点吧')
          
        }
        this.defaultChecked = false
        console.log(this.defaultChecked)
      }
    },
    hint(){
      this.moneyminus / 1
      this.money / 1
      if(this.moneyminus > this.money){
        this.messageStatus = 1
      }else{
        this.messageStatus = 0
      }
    },
    submit4(){
      console.log(this.user_id,this.moneyminus,'zxczxcvzxvcvndgjdhjfghdfgdfg')
      var data = {
        'user_id':this.user_id,
        'moneyminus':this.moneyminus
      }
      moneyminus_post(data).then(res=>{
        console.log(res)
      })
    }
  },
  created(){
      this.getMoney()
      this.getRank()
  }
};
</script>